<template>
  <div>
    <!--  分割线-->
    <el-divider></el-divider>
    <!--  高级查询-->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="formInline.caseOppositeParties" placeholder="对方当事人"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" plain @click="getLog">查询</el-button>
      </el-form-item>
    </el-form>
    <!--  查询我的案件当事人提交时间-->
    <el-table
        :data="logData"
        style="width: 100%">
      <el-table-column
          prop="caseOppositeParties"
          label="对方当事人">
      </el-table-column>
      <el-table-column
          prop="caseSubtime"
          label="提交时间">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="updateLog(scope.row.id)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--    分页-->
    <el-pagination
        background
        layout="total, sizes, prev, pager, next"
        :page-sizes="[2, 4, 6, 8]"
        :total="pageData.total"
        :page-size="formInline.pageNum"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
    </el-pagination>
    <!--修改对话框-->
    <el-dialog title="对方当事人" :visible.sync="dialogFormVisible">

      <el-form :model="formLog" :rules="rules">
        <el-form-item label="对方当事人:" prop="caseOppositeParties" style="width: 50%">
          <el-input v-model="formLog.caseOppositeParties" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" plain @click="updateLogBut">确定提交</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: "Log.vue",
  data() {
    return {
      dialogFormVisible:false,//修改表单默认关闭
      pageData: {},// 存储返回的分页数据
      logData: [],//查询案件返回的数据
      //高级查询案件
      formInline: {
        pageId: 1,
        pageNum: 2,
        "chaxun": "1"
      },
      formLog:{}, //修改表单界面数据重置
      rules: {
        caseOppositeParties: [
          {required: true, message: '请输入对方当事人名称', trigger: 'blur'},
        ],
      },
    }
  },
  created() {
    this.getLog();
  },
  methods: {
    //高级查询案件
    getLog() {
      this.$http
          .get("log",
              {params: this.formInline})
          .then((res) => {
            this.logData = res.data.data.list;
            this.pageData = res.data.data; // 返回的分页参数   pageinit
          })
          .catch(function (error) {
            console.log(error);
          });
    },
    // //根据id查询团队信息
    getLogId(id){
      this.$http
          .get(`log/${id}`)
          .then((res) => {
            this.formLog = res.data.data[0];
          })
          .catch(function (error) {
            console.log(error);
          });
    },
    //修改按钮弹出对话框
    updateLog(id) {
      this.getLogId(id)
      this.dialogFormVisible=true
    },
    updateLogBut() {
      this.$http.put("log", this.formLog)
          .then(() => {
                this.$notify({
                  type: "success",
                  message: "修改成功"
                }),
                    this.dialogFormVisible=false,
                    this.getLog()
          })
          .catch(function (error) {
            console.log(error);
          });
    },
    //显示几页
    handleSizeChange(val) {
      this.formInline.pageNum = val;
      this.getLog();
    },
    //每页显示几条
    handleCurrentChange(val) {
      this.formInline.pageId = val;
      this.getLog();
    },
  }
}
</script>

<style scoped>

</style>